src/widgets/home/study-list-table.tsx (2)

9-9: 경로 별칭 @/* 사용 필요

코딩 가이드라인에 따라 public/icons/Link.svg 대신 경로 별칭을 사용해야 합니다.

♻️ 수정 제안

-import LinkIcon from 'public/icons/Link.svg';
+import LinkIcon from '@/public/icons/Link.svg';

As per coding guidelines: "Use path alias @/* to reference src/* directory as configured in tsconfig.json for import statements"

---

123-135: Props 타입 설계 개선 고려

tutorialMode가 true일 때 studyDate는 사용되지 않지만 필수 prop으로 요구됩니다. 호출부에서 불필요한 값을 전달해야 하는 상황이 발생할 수 있습니다.

♻️ 선택적 개선안: Discriminated Union 사용

type StudyListSectionProps =
  | { tutorialMode: true; studyDate?: never }
  | { tutorialMode?: false; studyDate: string };

export default function StudyListSection(props: StudyListSectionProps) {
  return props.tutorialMode ? (
    <MockStudyListSection />
  ) : (
    <RealStudyListSection studyDate={props.studyDate} />
  );
}

src/components/section/my-participating-studies-section.tsx (2)

178-194: groupStudyId가 undefined인 경우에 대한 방어 코드 검토 필요.

studyId가 0으로 fallback되면 잘못된 URL(/group-study/0)이 생성되고, GTM 이벤트에 부정확한 데이터가 전송될 수 있습니다. 또한 여러 스터디의 groupStudyId가 undefined인 경우 React key 충돌이 발생할 수 있습니다.

♻️ 유효한 studyId가 있는 항목만 필터링하는 방안

       <div className="grid grid-cols-3 gap-300">
-        {participatingStudies.map((study) => {
-          const studyId = study.basicInfo?.groupStudyId ?? 0;
+        {participatingStudies
+          .filter((study) => study.basicInfo?.groupStudyId != null)
+          .map((study) => {
+          const studyId = study.basicInfo!.groupStudyId;
           const title = study.simpleDetailInfo?.title ?? '';

또는 participatingStudies useMemo에서 미리 필터링하는 것도 방법입니다.

---

148-159: handleStudyClick 함수 메모이제이션 고려.

현재 구현은 매 렌더링마다 새 함수 인스턴스가 생성됩니다. StudyCard가 React.memo로 감싸져 있다면, useCallback으로 최적화할 수 있습니다.

♻️ useCallback 적용 예시

+import { useMemo, useCallback } from 'react';

-  const handleStudyClick = (studyId: number, title: string) => {
+  const handleStudyClick = useCallback((studyId: number, title: string) => {
     sendGTMEvent({
       event:
         classification === 'GROUP_STUDY'
           ? 'group_study_detail_view'
           : 'premium_study_detail_view',
       dl_timestamp: new Date().toISOString(),
       dl_member_id: hashValue(String(memberId)),
       dl_study_id: String(studyId),
       dl_study_title: title,
     });
-  };
+  }, [classification, memberId]);

src/components/ui/toast.tsx (1)

35-38: Tailwind 클래스 정렬 규칙을 맞춰주세요.

그룹 내 알파벳 정렬 규칙이 깨져 보여요. prettier-plugin-tailwindcss로 재정렬 부탁드립니다.
As per coding guidelines: Organize Tailwind CSS classes using prettier-plugin-tailwindcss for automatic class ordering and sort them alphabetically within groups.

src/components/ui/action-pill-button.tsx (1)

4-44: variant/size 조합은 CVA로 관리하는 편이 일관됩니다. 동적 Tailwind 변형을 수동 맵으로 관리하면 확장·타입 안전성이 떨어집니다.

♻️ 제안 리팩터링

-import React from 'react';
-import { cn } from '@/components/ui/(shadcn)/lib/utils';
-
-type ActionPillVariant = 'primary' | 'neutral' | 'ghost';
-type ActionPillSize = 'xs' | 'sm' | 'md';
-
-interface ActionPillButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ActionPillVariant;
-  size?: ActionPillSize;
-  icon?: React.ReactNode;
-}
-
-const VARIANT_CLASSES: Record<ActionPillVariant, string> = {
-  primary:
-    'bg-fill-brand-default-default text-text-inverse hover:bg-fill-brand-default-hover',
-  neutral:
-    'bg-background-alternative text-text-subtle hover:bg-fill-neutral-subtle-hover',
-  ghost:
-    'bg-background-default text-text-subtle hover:bg-fill-neutral-subtle-hover',
-};
-
-const SIZE_CLASSES: Record<ActionPillSize, string> = {
-  xs: 'px-100 py-50 font-designer-11m',
-  sm: 'px-150 py-50 font-designer-12m',
-  md: 'px-200 py-100 font-designer-12m',
-};
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/components/ui/(shadcn)/lib/utils';
+
+const actionPillButtonVariants = cva(
+  'rounded-100 flex items-center gap-50 transition-colors',
+  {
+    variants: {
+      variant: {
+        primary:
+          'bg-fill-brand-default-default text-text-inverse hover:bg-fill-brand-default-hover',
+        neutral:
+          'bg-background-alternative text-text-subtle hover:bg-fill-neutral-subtle-hover',
+        ghost: 'bg-background-default text-text-subtle hover:bg-fill-neutral-subtle-hover',
+      },
+      size: {
+        xs: 'px-100 py-50 font-designer-11m',
+        sm: 'px-150 py-50 font-designer-12m',
+        md: 'px-200 py-100 font-designer-12m',
+      },
+    },
+    defaultVariants: {
+      variant: 'ghost',
+      size: 'sm',
+    },
+  },
+);
+
+interface ActionPillButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof actionPillButtonVariants> {
+  icon?: React.ReactNode;
+}
@@
 export default function ActionPillButton({
-  variant = 'ghost',
-  size = 'sm',
+  variant,
+  size,
   icon,
   className,
   children,
   ...props
 }: ActionPillButtonProps) {
   return (
     <button
       type="button"
       className={cn(
-        'rounded-100 flex items-center gap-50 transition-colors',
-        VARIANT_CLASSES[variant],
-        SIZE_CLASSES[size],
+        actionPillButtonVariants({ variant, size }),
         className,
       )}
       {...props}
     >

As per coding guidelines: Use class composition utilities clsx, tailwind-merge, and class-variance-authority (CVA) for dynamic Tailwind class management.

src/features/study/one-to-one/balance-game/ui/use-infinite-scroll.ts (1)

26-37: entries 배열 접근 시 안전성 검사 추가 권장

entries[0]에 직접 접근하고 있는데, IntersectionObserver 콜백에서 배열이 비어있는 경우는 거의 없지만, 방어적 코딩을 위해 검사를 추가하는 것이 좋습니다.

♻️ 제안된 수정

     const observer = new IntersectionObserver(
       (entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+
         if (
-          entries[0].isIntersecting &&
+          entry.isIntersecting &&
           hasNextPage &&
           !isFetchingNextPage &&
           !isFetching
         ) {
           fetchNextPage().catch(() => {
             // 무한 스크롤 실패 시 무시
           });
         }
       },
       { threshold },
     );

src/components/voting/voting-option-fields.tsx (2)

57-65: 접근성 향상을 위해 aria-label 추가 권장

삭제 버튼에 시각적 아이콘만 있어서 스크린 리더 사용자가 버튼의 용도를 파악하기 어려울 수 있습니다.

♻️ 제안된 수정

             {fields.length > 2 && (
               <button
                 type="button"
                 onClick={() => remove(index)}
+                aria-label={`선택지 ${index + 1} 삭제`}
                 className="rounded-100 text-text-subtle hover:bg-fill-critical-subtle-default hover:text-text-critical p-150 transition-colors"
               >
                 <Trash2 className="h-4 w-4" />
               </button>
             )}

---

74-83: 추가 버튼에도 aria-label 추가 권장

일관성을 위해 추가 버튼에도 명시적인 aria-label을 추가하는 것이 좋습니다. 버튼 내 텍스트가 있지만, 아이콘과 텍스트를 포함한 전체 의미를 명확히 전달할 수 있습니다.

♻️ 제안된 수정

         <button
           type="button"
           onClick={() => append({ label: '' })}
+          aria-label="새 선택지 추가"
           className="rounded-100 border-border-brand font-designer-13b text-text-brand hover:bg-fill-brand-subtle-default mt-100 flex items-center gap-100 border border-dashed px-300 py-200 transition-colors"
         >

src/features/study/one-to-one/history/ui/study-history-list-section.tsx (1)

17-25: 고정 너비 열이 작은 화면에서 레이아웃 문제를 일으킬 수 있음

헤더 열들이 고정 픽셀 너비(w-[150px], w-[120px] 등)를 사용하고 있어, 작은 화면에서 콘텐츠가 잘리거나 레이아웃이 깨질 수 있습니다. 수평 스크롤을 허용하거나 반응형 처리를 고려해 보세요.

♻️ 수평 스크롤 추가 제안

-    <div className="bg-background-default rounded-200 border-border-subtle shadow-1 overflow-hidden border">
+    <div className="bg-background-default rounded-200 border-border-subtle shadow-1 overflow-x-auto border">
+      <div className="min-w-[900px]">
       <div className="bg-background-alternative/80 border-border-subtlest font-designer-13b text-text-subtle flex gap-400 border-b px-400 py-250 tracking-wider uppercase">
         ...
       </div>
       <div className="divide-border-subtlest divide-y">
         ...
       </div>
+      </div>
     </div>

src/features/study/one-to-one/history/ui/study-history-pagination.tsx (1)

21-35: 화살표 문자 대신 아이콘 사용 권장

현재 화살표 문자(←, →)를 사용하고 있는데, 다른 컴포넌트들이 lucide-react 아이콘을 사용하는 점을 고려하면 ChevronLeft와 ChevronRight 아이콘으로 변경하는 것이 디자인 시스템의 일관성에 더 좋을 수 있습니다.

♻️ 제안된 수정

+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import React from 'react';
+import PaginationCircleButton from '@/features/study/one-to-one/ui/pagination-circle-button';

       <PaginationCircleButton
         onClick={() => onPageChange(Math.max(1, currentPage - 1))}
         disabled={currentPage === 1}
       >
-        ←
+        <ChevronLeft className="h-4 w-4" />
       </PaginationCircleButton>
       ...
       <PaginationCircleButton
         onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
         disabled={currentPage === totalPages}
       >
-        →
+        <ChevronRight className="h-4 w-4" />
       </PaginationCircleButton>

src/components/ui/filters/sort-dropdown.tsx (1)

34-51: 접근성 개선이 필요합니다: 호버 전용 드롭다운은 키보드 및 터치 사용자에게 접근 불가합니다.

현재 group-hover:block만 사용하여 드롭다운이 표시됩니다. 이는 다음 사용자에게 문제가 됩니다:

• 키보드 사용자 (Tab 네비게이션)
• 터치 디바이스 사용자
• 스크린 리더 사용자

권장 개선사항:

1. focus-within:block 추가하여 키보드 접근성 확보
2. ARIA 속성 추가 (aria-expanded, aria-haspopup, role="menu")
3. 옵션 버튼에 type="button" 추가

♻️ 접근성 개선 제안

-      <div className="absolute top-full right-0 z-20 hidden w-[120px] pt-50 group-hover:block">
+      <div className="absolute top-full right-0 z-20 hidden w-[120px] pt-50 group-hover:block group-focus-within:block">

             <button
               key={option.value}
+              type="button"
               onClick={() => onChange(option.value)}
               className="hover:bg-fill-neutral-subtle-hover font-designer-14r w-full px-200 py-150 text-left transition-colors"
             >

src/features/study/one-to-one/balance-game/model/balance-game-keys.ts (1)

14-22: tags 함수의 파라미터를 객체 형태로 변경하는 것을 고려해 주세요.

다른 함수들(list, searchSuggestionList)은 객체 파라미터를 사용하는데, tags만 위치 인자를 사용하고 있어 API 일관성이 떨어집니다.

♻️ 리팩토링 제안

-  tags: (query: string, limit: number, minLength: number, sort: string) =>
-    [
-      ...BALANCE_GAME_QUERY_KEYS.all,
-      'tags',
-      query,
-      limit,
-      minLength,
-      sort,
-    ] as const,
+  tags: (params: { query: string; limit: number; minLength: number; sort: string }) =>
+    [...BALANCE_GAME_QUERY_KEYS.all, 'tags', params] as const,

src/features/study/one-to-one/balance-game/model/use-balance-game-search-suggestions-query.ts (1)

14-28: 검색어를 공통으로 트리밍해 캐시 분산을 줄여주세요.
enabled 계산은 trim 기준인데 queryKey/queryFn은 원문 query를 사용하고 있어 공백 유무로 캐시가 분산될 수 있습니다. trim 값을 공통 사용하면 의도와 일치합니다.

💡 수정 제안

-  const enabled = options?.enabled ?? query.trim().length >= minLength;
+  const trimmedQuery = query.trim();
+  const enabled = options?.enabled ?? trimmedQuery.length >= minLength;

   return useQuery({
     queryKey: BALANCE_GAME_QUERY_KEYS.searchSuggestionList({
-      q: query,
+      q: trimmedQuery,
       size,
       minLength,
       scope,
     }),
     queryFn: () =>
-      getBalanceGameSearchSuggestions({ q: query, size, minLength, scope }),
+      getBalanceGameSearchSuggestions({ q: trimmedQuery, size, minLength, scope }),

src/hooks/use-scroll-to-home-content.ts (1)

49-75: 의존성 배열에 옵션/콜백을 포함해 최신 값이 반영되게 해주세요.
effect 내부에서 scrollToHomeContent와 options를 참조하지만 deps에 포함되지 않아 옵션 변경 시 오래된 값으로 동작할 수 있습니다.

💡 수정 제안

   const scrollToHomeContent = useScrollToHomeContent(options?.offset);
   const isFirst = useRef(true);
+  const effectDeps = [
+    ...deps,
+    scrollToHomeContent,
+    options?.enabled,
+    options?.stabilize,
+    options?.stabilizeDurationMs,
+  ];

   useEffect(() => {
     if (options?.enabled === false) return;
     if (isFirst.current) {
       isFirst.current = false;

       return;
     }
     scrollToHomeContent();
     if (options?.stabilize) {
       stabilizeScrollAfterLayout(
         scrollToHomeContent,
         options?.stabilizeDurationMs ?? 800,
       );
     }
-  }, deps);
+  }, effectDeps);

src/features/study/one-to-one/balance-game/model/use-balance-game-query.ts (2)

7-12: src 내부 import는 @/ 별칭으로 통일해주세요.
상대경로 대신 tsconfig alias를 사용하면 경로 일관성과 리팩터링 안정성이 좋아집니다.

💡 수정 제안

 import {
   getBalanceGameComments,
   getBalanceGameDetail,
   getBalanceGameList,
   getBalanceGameTagSuggestions,
-} from '../api/balance-game-api';
+} from '@/features/study/one-to-one/balance-game/api/balance-game-api';

As per coding guidelines, `**/*.{ts,tsx,js,jsx}`: Use path alias `@/`* to reference src/* directory as configured in tsconfig.json for import statements.

---

14-27: 태그 순서로 인한 캐시 분산을 방지하도록 정규화 권장.
같은 태그 집합이라도 배열 순서가 다르면 queryKey가 달라져 캐시/요청이 분산될 수 있습니다. tags를 정규화해서 queryKey와 API 호출에 사용하세요.

💡 수정 제안

 ) => {
+  const normalizedTags = tags?.filter(Boolean).sort();
   return useInfiniteQuery({
-    queryKey: BALANCE_GAME_QUERY_KEYS.list({ sort, status, tags, q }),
+    queryKey: BALANCE_GAME_QUERY_KEYS.list({
+      sort,
+      status,
+      tags: normalizedTags,
+      q,
+    }),
     queryFn: ({ pageParam = 1 }) =>
-      getBalanceGameList({ page: pageParam, size: 10, sort, status, tags, q }),
+      getBalanceGameList({
+        page: pageParam,
+        size: 10,
+        sort,
+        status,
+        tags: normalizedTags,
+        q,
+      }),

src/features/study/one-to-one/balance-game/ui/balance-game-filters-bar.tsx (1)

3-10: 로컬 UI 컴포넌트도 @/ 별칭 경로로 통일해주세요.
src 내부 경로는 alias를 쓰는 규칙과 맞추는 편이 유지보수에 유리합니다.

💡 수정 제안

 import { ArrowUpDown, Search } from 'lucide-react';
 import React from 'react';
 import { cn } from '@/components/ui/(shadcn)/lib/utils';
 import { useBalanceGameSearchSuggestionsQuery } from '@/features/study/one-to-one/balance-game/model/use-balance-game-search-suggestions-query';
 import { useDebounce } from '@/hooks/use-debounce';
-import FilterPillButton from './filter-pill-button';
-import TagAutocomplete from './tag-autocomplete';
+import FilterPillButton from '@/features/study/one-to-one/balance-game/ui/filter-pill-button';
+import TagAutocomplete from '@/features/study/one-to-one/balance-game/ui/tag-autocomplete';

As per coding guidelines, `**/*.{ts,tsx,js,jsx}`: Use path alias `@/`* to reference src/* directory as configured in tsconfig.json for import statements.

src/components/voting/voting-tag-field.tsx (1)

32-36: 최대 태그 수 문구를 상수로 동기화하세요.
BALANCE_GAME_TAG_MAX_COUNT와 UI 문구가 분리돼 있어 값 변경 시 불일치가 생길 수 있습니다. 상수를 사용해 표시를 생성하는 편이 안전합니다.

♻️ 제안 변경

-        <span className="font-designer-12r text-text-subtle ml-100">
-          (최대 3개)
-        </span>
+        <span className="font-designer-12r text-text-subtle ml-100">
+          (최대 {BALANCE_GAME_TAG_MAX_COUNT}개)
+        </span>

src/features/study/one-to-one/balance-game/ui/community-tab-client.tsx (2)

30-32: 상대 경로 대신 @/ 경로 별칭으로 통일해주세요.
src 하위 모듈은 @/ 별칭 사용 규칙에 맞춰 정리하는 게 좋습니다.

♻️ 제안 변경

-import BalanceGameFiltersBar from './balance-game-filters-bar';
-import { useBalanceGameFilters } from './use-balance-game-filters';
-import { useInfiniteScroll } from './use-infinite-scroll';
+import BalanceGameFiltersBar from '@/features/study/one-to-one/balance-game/ui/balance-game-filters-bar';
+import { useBalanceGameFilters } from '@/features/study/one-to-one/balance-game/ui/use-balance-game-filters';
+import { useInfiniteScroll } from '@/features/study/one-to-one/balance-game/ui/use-infinite-scroll';

As per coding guidelines, **/*.{ts,tsx,js,jsx}: Use path alias @/* to reference src/* directory as configured in tsconfig.json for import statements.

---

273-276: 리스트 키에 index를 섞지 않는 편이 좋습니다.
정렬/필터 변경 시 불필요한 리마운트가 발생할 수 있어 voting.id만 사용하는 것을 권장합니다.

♻️ 제안 변경

-              {visibleVotings.map((voting, index) => (
+              {visibleVotings.map((voting) => (
                 <VotingCard
-                  key={`${voting.id}-${index}`}
+                  key={voting.id}
                   voting={voting}

src/app/(service)/home/page.tsx (1)

31-31: 빈 spacer div 대신 컨테이너 패딩으로 여백을 주는 게 낫습니다.
DOM 노이즈를 줄이고 접근성 관점에서도 더 깔끔합니다.

♻️ 제안 변경

-    <div className="mx-auto flex w-[1496px] flex-col gap-500 px-600 py-600">
+    <div className="mx-auto flex w-[1496px] flex-col gap-500 px-600 py-600 pb-[400px]">
       <Banner />
       <FeedbackLink />
       <StartStudyButton />
       <HomeContent activeTab={activeTab} />
-      <div className="h-[400px]" aria-hidden />
     </div>

src/api/client/axios.ts (1)

1-4: src 내부 import는 @/ 별칭으로 통일해주세요.

♻️ 제안 변경

-import { ApiError, isApiError } from './api-error';
-import { attachApiLogger } from './api-logger';
-import { getCookie, setCookie } from './cookie';
+import { ApiError, isApiError } from '@/api/client/api-error';
+import { attachApiLogger } from '@/api/client/api-logger';
+import { getCookie, setCookie } from '@/api/client/cookie';

As per coding guidelines, **/*.{ts,tsx,js,jsx}: Use path alias @/* to reference src/* directory as configured in tsconfig.json for import statements.

src/components/discussion/comment-list.tsx (1)

89-97: any 타입 캐스팅으로 인한 타입 안전성 저하

(comment.author as any).profileImage 패턴은 TypeScript의 타입 체크를 우회합니다. 또한 중첩된 삼항 연산자로 인해 가독성이 떨어집니다.

타입 가드 함수를 사용하거나, DiscussionComment | VotingComment | BalanceGameComment 유니온 타입에서 profileImage 속성을 명시적으로 처리하는 것이 좋습니다.

♻️ 헬퍼 함수를 사용한 리팩토링 제안

+// 컴포넌트 외부에 헬퍼 함수 추가
+const getAuthorImage = (author: DiscussionComment['author'] | VotingComment['author'] | BalanceGameComment['author']): string | undefined => {
+  if ('avatar' in author) return author.avatar;
+  if ('profileImage' in author) {
+    const profileImage = author.profileImage;
+    if (typeof profileImage === 'string') return profileImage;
+    if (profileImage && typeof profileImage === 'object' && 'resizedImages' in profileImage) {
+      return profileImage.resizedImages?.[0]?.resizedImageUrl;
+    }
+  }
+  return undefined;
+};

 // 사용 시
-        const authorImage =
-          'avatar' in comment.author
-            ? comment.author.avatar
-            : 'profileImage' in comment.author
-              ? typeof (comment.author as any).profileImage === 'string'
-                ? (comment.author as any).profileImage
-                : (comment.author as any).profileImage?.resizedImages?.[0]
-                    ?.resizedImageUrl
-              : undefined;
+        const authorImage = getAuthorImage(comment.author);

src/features/study/one-to-one/history/ui/study-history-utils.ts (2)

1-1: 불필요한 'use client' 지시어

이 파일은 React 훅이나 브라우저 API를 사용하지 않는 순수 유틸리티 함수입니다. 'use client' 지시어는 필요하지 않으며, 서버 컴포넌트에서도 이 유틸리티를 사용할 수 있도록 제거하는 것이 좋습니다.

♻️ 제안

-'use client';
-
 import type {

---

9-11: 날짜 포맷팅에 date-fns 사용 고려

코드베이스의 다른 파일(예: comment-list.tsx)에서 이미 date-fns를 사용하고 있습니다. 일관성을 위해 수동 날짜 포맷팅 대신 date-fns의 format 함수를 사용하는 것을 고려해 보세요.

♻️ date-fns 사용 예시

import { format } from 'date-fns';
import { ko } from 'date-fns/locale';

const dateObj = new Date(data.scheduledAt);
const date = format(dateObj, 'yyyy.MM.dd (E)', { locale: ko });

src/features/study/one-to-one/hall-of-fame/ui/hall-of-fame-mvp-section.tsx (1)

4-4: React 19에서 불필요한 import

React 19와 새로운 JSX Transform을 사용하면 JSX만을 위한 import React from 'react'는 필요하지 않습니다. 다만 코드베이스 전체의 일관성을 위해 유지해도 무방합니다.

src/features/study/one-to-one/archive/model/use-archive-search-suggestions-query.ts (1)

13-24: 검색어 공백 정규화로 캐시 중복을 줄이는 것 검토하세요.
enabled는 trim 길이를 기준으로 판단하지만 실제 queryKey/요청은 원본 문자열을 사용해 공백 차이로 캐시가 분리될 수 있습니다. trim()을 한 번 계산해 일관되게 사용하면 호출/캐시 효율이 좋아집니다.

♻️ 제안 변경

-  const limit = options?.limit ?? 10;
-  const minLength = options?.minLength ?? 1;
-  const enabled = options?.enabled ?? query.trim().length >= minLength;
+  const limit = options?.limit ?? 10;
+  const minLength = options?.minLength ?? 1;
+  const normalizedQuery = query.trim();
+  const enabled = options?.enabled ?? normalizedQuery.length >= minLength;

   return useQuery({
     queryKey: ARCHIVE_QUERY_KEYS.searchSuggestionList({
-      q: query,
+      q: normalizedQuery,
       limit,
       minLength,
     }),
-    queryFn: () => getArchiveSearchSuggestions({ q: query, limit, minLength }),
+    queryFn: () =>
+      getArchiveSearchSuggestions({ q: normalizedQuery, limit, minLength }),

src/features/study/one-to-one/schedule/ui/study-tutorial-controller.tsx (1)

6-10: src 경로는 @/ 별칭으로 통일해 주세요.*

현재 상대 경로 import가 있어 프로젝트 import 규칙과 어긋납니다. @/ 별칭으로 통일해 주세요.

♻️ 제안 수정안

-import StudyCard from './study-card';
-import {
-  STUDY_TUTORIAL_STEPS,
-  getStudyTutorialScenario,
-} from '../model/study-tutorial-steps';
+import StudyCard from '@/features/study/one-to-one/schedule/ui/study-card';
+import {
+  STUDY_TUTORIAL_STEPS,
+  getStudyTutorialScenario,
+} from '@/features/study/one-to-one/schedule/model/study-tutorial-steps';

As per coding guidelines, src 경로는 `@/`* 별칭으로 import해야 합니다.

src/features/study/one-to-one/archive/model/use-update-archive-mutation.ts (1)

12-57: 전반적으로 잘 구현된 optimistic update 패턴입니다.

몇 가지 권장 개선 사항:

1. Line 43: err와 variables 파라미터가 사용되지 않습니다. 언더스코어 접두사를 사용하거나 제거하는 것이 좋습니다.

2. Line 50-56: onSettled에서 invalidation을 수행하는 것은 괜찮지만, 학습된 패턴에 따르면 onSuccess에서 수행하는 것이 더 일반적입니다. 현재 방식은 에러 발생 시에도 invalidation이 실행되므로 의도적이라면 문제없습니다.

♻️ 미사용 파라미터 정리 제안

-    onError: (err, variables, context) => {
+    onError: (_err, _variables, context) => {

Based on learnings: "In TanStack Query useMutation hooks, call queryClient.invalidateQueries() in onSuccess callback to invalidate related queries"

src/features/study/one-to-one/archive/api/update-archive.ts (1)

16-26: API 함수 구현이 적절합니다.

axiosInstance를 올바르게 사용하고 있으며, data.data ?? data.content 패턴으로 API 응답의 유연성을 잘 처리하고 있습니다.

반환 타입을 명시적으로 지정하면 타입 안전성이 향상됩니다.

♻️ 명시적 반환 타입 추가 제안

 export const updateArchive = async (
   id: number,
   request: UpdateArchiveRequest,
-) => {
+): Promise<UpdateArchiveResponse | undefined> => {

src/features/study/one-to-one/hall-of-fame/ui/hall-of-fame-ranker-section.tsx (1)

29-33: 아이콘 렌더링 패턴을 간소화할 수 있습니다.

IIFE 패턴 대신 직접 렌더링하면 코드가 더 간결해집니다. 동일한 패턴이 Line 54-58에도 반복됩니다.

♻️ 아이콘 렌더링 간소화 제안

             <span className={TAB_CONFIG[rankingType].colorClass}>
-              {(() => {
-                const Icon = TAB_CONFIG[rankingType].icon;
-
-                return <Icon className="h-4 w-4" />;
-              })()}
+              {React.createElement(TAB_CONFIG[rankingType].icon, { className: 'h-4 w-4' })}
             </span>

또는 더 간단하게:

+          const IconComponent = TAB_CONFIG[rankingType].icon;
           <span className={TAB_CONFIG[rankingType].colorClass}>
-              {(() => {
-                const Icon = TAB_CONFIG[rankingType].icon;
-
-                return <Icon className="h-4 w-4" />;
-              })()}
+              <IconComponent className="h-4 w-4" />
           </span>

src/features/study/one-to-one/archive/ui/use-archive-filters.ts (1)

28-48: 상호 배제 토글 로직이 잘 구현되어 있습니다.

toggleBookmarkedOnly와 toggleMyOnly가 서로를 해제하는 상호 배제 패턴이 올바르게 구현되었습니다.

다만, 필터 변경 시 currentPage를 1로 리셋하지 않으면 유효하지 않은 페이지 번호가 될 수 있습니다.

♻️ 필터 변경 시 페이지 리셋 제안

   const toggleBookmarkedOnly = () => {
     setShowBookmarkedOnly((prev) => {
       if (!prev) {
         setShowMyOnly(false);
       }

       return !prev;
     });
+    setCurrentPage(1);
     triggerScroll();
   };

   const toggleMyOnly = () => {
     setShowMyOnly((prev) => {
       if (!prev) {
         setShowBookmarkedOnly(false);
       }

       return !prev;
     });
+    setCurrentPage(1);
     triggerScroll();
   };

src/features/study/one-to-one/hall-of-fame/ui/hall-of-fame-tab-client.tsx (1)

7-14: 상대 경로 대신 @/ 경로 별칭을 사용해 주세요.
동일한 src 하위 모듈이므로 alias로 통일하면 이동/리팩터링 시 안전합니다.

♻️ 제안 수정

-import {
-  addScoreLabel,
-  type RankingType,
-  type RankerWithLabel,
-} from './hall-of-fame-constants';
-import HallOfFameHeader from './hall-of-fame-header';
-import HallOfFameMvpSection from './hall-of-fame-mvp-section';
-import HallOfFameRankerSection from './hall-of-fame-ranker-section';
+import {
+  addScoreLabel,
+  type RankingType,
+  type RankerWithLabel,
+} from '@/features/study/one-to-one/hall-of-fame/ui/hall-of-fame-constants';
+import HallOfFameHeader from '@/features/study/one-to-one/hall-of-fame/ui/hall-of-fame-header';
+import HallOfFameMvpSection from '@/features/study/one-to-one/hall-of-fame/ui/hall-of-fame-mvp-section';
+import HallOfFameRankerSection from '@/features/study/one-to-one/hall-of-fame/ui/hall-of-fame-ranker-section';

As per coding guidelines, Use path alias `@/`* to reference src/* directory as configured in tsconfig.json for import statements.

src/features/study/one-to-one/hall-of-fame/ui/hall-of-fame-constants.ts (1)

39-56: TAB_CONFIG의 unit을 재사용하면 중복/불일치 위험을 줄일 수 있습니다.

♻️ 제안 수정

 export const addScoreLabel = (
   ranker: Ranker,
   type: RankingType,
 ): RankerWithLabel => {
-  let scoreLabel = '';
-
-  if (type === 'ATTENDANCE') {
-    scoreLabel = `${ranker.score}회`;
-  } else if (type === 'STUDY_LOG') {
-    scoreLabel = `${ranker.score}건`;
-  } else {
-    scoreLabel = `${ranker.score}℃`;
-  }
-
   return {
     ...ranker,
-    scoreLabel,
+    scoreLabel: `${ranker.score}${TAB_CONFIG[type].unit}`,
   };
 };

src/features/study/one-to-one/hall-of-fame/ui/ranker-list-item.tsx (1)

7-8: 상대 경로 대신 @/ 경로 별칭을 사용해 주세요.

♻️ 제안 수정

-import type { RankerWithLabel } from './hall-of-fame-constants';
-import RankBadge from './rank-badge';
+import type { RankerWithLabel } from '@/features/study/one-to-one/hall-of-fame/ui/hall-of-fame-constants';
+import RankBadge from '@/features/study/one-to-one/hall-of-fame/ui/rank-badge';

As per coding guidelines, Use path alias `@/`* to reference src/* directory as configured in tsconfig.json for import statements.

src/components/card/voting-card.tsx (1)

7-7: VoteTimer import도 @/ 경로 별칭으로 통일해 주세요.

♻️ 제안 수정

-import VoteTimer from '../voting/vote-timer';
+import VoteTimer from '@/components/voting/vote-timer';

As per coding guidelines, Use path alias `@/`* to reference src/* directory as configured in tsconfig.json for import statements.

src/features/study/one-to-one/archive/ui/archive-list.tsx (1)

29-36: canEdit prop 타입 일관성 검토.

ArchiveListProps에서는 canEdit이 필수(boolean)로 정의되어 있지만, LibraryRow에서는 선택적(boolean?)으로 정의되어 있습니다. ArchiveList에서 항상 canEdit을 전달하므로 LibraryRow에서도 필수로 변경하면 타입 일관성이 향상됩니다.

♻️ 타입 일관성 개선 제안

 }: {
   item: ArchiveItem;
   onLike: (e: React.MouseEvent, id: number) => void;
   onView: (item: ArchiveItem) => void;
   onBookmark: (e: React.MouseEvent, id: number) => void;
   onUpdate: (id: number, request: UpdateArchiveRequest) => void;
-  canEdit?: boolean;
+  canEdit: boolean;
 }) => {

src/features/study/one-to-one/schedule/ui/today-study-card.tsx (1)

51-56: 중첩 삼항 연산자 가독성 개선 제안.

isInterviewee 결정 로직이 중첩 삼항 연산자로 되어 있어 가독성이 다소 떨어집니다. 향후 유지보수를 위해 더 명확한 조건문으로 리팩토링을 고려해 보세요.

♻️ 가독성 개선 제안

-  const isInterviewee =
-    forcedRole === 'INTERVIEWER'
-      ? false
-      : forcedRole === 'INTERVIEWEE'
-        ? true
-        : memberId === resolvedStudyData.intervieweeId;
+  const isInterviewee = (() => {
+    if (forcedRole === 'INTERVIEWER') return false;
+    if (forcedRole === 'INTERVIEWEE') return true;
+    return memberId === resolvedStudyData.intervieweeId;
+  })();